<template>
	<div class="back_contain_n">
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.tabName" placeholder="年">
							<el-option label="配拌投料" value="配拌投料"></el-option>
							<el-option label="挤塑直切" value="挤塑直切"></el-option>
							<el-option label="U管成型" value="U管成型"></el-option>
							<el-option label="包装" value="包装"></el-option>
						</el-select>
					</div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.tabName" placeholder="月">

						</el-select>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span class="tai" v-if="hasRole('') " @click="exportPdf"><i class="iconfont icon-PDF"></i> PDF导出</span>
			</div>
		</div>
		<!-- table -->
		<sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   @getBackData="getList"
				   :isOperate="false"
		>
		</sys-table>
	</div>
</template>

<script>
	import {formatDate} from "@/plugins/formatDate";
	import {Loading} from 'element-ui';
	import {getStore} from "@/plugins/localStore";

	export default {
		data() {
			return {
				queryForm: {
					deviceCode: '',
					tabName: '',
					type: '',
				},
				copyQueryForm:null,
				backCount:0,
				tableLoading:false,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				time:[]
			}
		},
		methods: {
			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				self.copyQueryForm = null;
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0||startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				self.copyQueryForm = Object.assign({},param);
				self.$http({
					url: "/jinl/sterilize/getSterilizeHistoryList",
					method: "post",
					params:param
				}).then(resp => {
					if (resp.success) {
						self.tableHeader =  [
							{"columnValue": "deviceCode", "columnName": "工序品类" },
							{"columnValue": "sterilizeTypeCn", "columnName": "检项数(个)" },
							{"columnValue": "sterilizeWater", "columnName": "监测总数(次)" },
							{"columnValue": "createTimeFt", "columnName": "合格(次)" },
							{"columnValue": "sterilizeUserName", "columnName": "不合格(次)"},
							{"columnValue": "sterilizeUserName", "columnName": "合格率"},
						]
						self.tableData = resp.result;
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
					self.tableLoading = false;
				});
			},

			searchReset() { //重置搜索
				this.getList();
			},
		},
		mounted() {
			let self = this;
			self.getList();

		},
		components: {},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.search_list {
		display: flex;
		justify-content: space-between;

		.sb_ {
			margin-right: 20px;

			.input_flex {
				width: auto;
				display: flex;
				align-items: center;
			}
		}
	}

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}
		}
	}
</style>